<template>
    <div class="share-list">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            大众信息审核
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                 <!-- 全部审核/已处理/未处理 -->
                <Row>
                    <Col class="allAudit">
                        <Button class="current" @click="current(0)">全部列表</Button>
                        <Button @click="current(1)">待审核</Button>
                        <Button @click="current(2)">已通过</Button>
                        <Button @click="current(3)">已驳回</Button>
                    </Col>
                </Row>
                <div class="search-box">
                    <Row :gutter="16" style="min-width:1024px">
                        <!-- <Col :span="6">
                            视频名称：
                            <Input v-model="searchForm.video_name" placeholder="视频名称" style="width:auto"/>
                        </Col> -->
                        <Col :span="7">
                            发布人账号：
                            <Input v-model="searchForm.uid" placeholder="用户账号" style="width:auto"/>
                        </Col>
                        <Col :span="6">
                            发布时间：
                            <DatePicker v-model="create_time" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))" type="daterange" placement="bottom" placeholder="请选择时间" style="width: auto"  @on-change="returnDate"></DatePicker>
                        </Col>
                        <Col :span="5">
                            <div class="search-btn" @click="getShareList">查询</div>
                        </Col>
                    </Row>
                </div>

                <!-- <div class="btn-box">
                    <div>
                        审核开关：
                        <el-switch
                            v-model="isOpen"
                            active-color="#13ce66"
                            inactive-color="#ddd"
                            :disabled="openChangeLoading"
                            @change="openChange()">
                        </el-switch>
                        <i class="el-icon-loading" v-show="openChangeLoading" style="color:#13ce66;font-size:14px"></i>
                        <span v-show="!openChangeLoading">{{isOpen ? '（已开启）' : '（已关闭）'}}</span>
                    </div>
                    
                </div> -->

                <div class="table-box">
                    <el-table
                        ref="table"
                        :data="tableData"
                        size="mini"
                        style="width: 100%;min-width:920px">
                        <!-- <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            label="发布人账号"
                            width="100">
                            <template slot-scope="scope">
                                <p>{{scope.row.user_info ? scope.row.user_info.account : '未知'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="发布人昵称"
                            width="100">
                            <template slot-scope="scope">
                                <p>{{scope.row.user_info ? scope.row.user_info.name : '未知'}}</p>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            align="center"
                            prop="userName"
                            label="发布人昵称">
                        </el-table-column> -->
                        <el-table-column
                            prop="content"
                            label="内容"
                            min-width="300">
                        </el-table-column>
                        <!-- <el-table-column
                            align="center"
                            prop="videoLength"
                            label="视频时长">
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            label="图片"
                            width="300">
                            <template slot-scope="scope">
                                <img v-if="scope.row.images.length > 0" class="img-iview" :src="imgBaseUrl + scope.row.images[0]" title="点击查看更多图片" onerror="this.title = '图片加载失败'" @click="openImger(scope.row.images)">
                                <p v-else>暂无图片</p>
                                <p>共{{scope.row.images.length}}张图片</p>
                                <!-- <img v-if="testImg.length > 0" class="img-iview" src="" alt=""> -->
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="create_time"
                            label="提交时间">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="状态">
                            <template slot-scope="scope">
                                <p>{{scope.row.type === '0' ? '未审核' : scope.row.type === '1' ? '已通过' : '已驳回'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="200"
                            align="center">
                            <template slot-scope="scope">
                                <!-- <el-button type="text" size="small" @click="look(scope.row.video_url,scope.row.video_name)">观看视频</el-button> -->
                                <el-button type="text" size="small" :disabled="scope.row.type === '1'" @click="pass(scope.row.id)">通过</el-button>
                                <el-button type="text" size="small" :disabled="scope.row.type === '2'" @click="rejected(scope.row.id)">驳回</el-button>
                                <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="page-box">
                    <Page :total="total" :page-size="pageSize" show-elevator show-total @on-change="pageChange" />
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import * as api from "@/api/api";
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                state: '',
                searchForm: {
                    uid: '',
                    video_name: ''
                },
                create_time_search: '',
				create_time: ['', ''],
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },//日期选择范围配置
                isOpen: false,//审核开关
                openChangeLoading: false,//开关请求状态
                tableData: [],//表格数据
                total: 8,//数据总条数
                pageSize: 10,//每页显示条数
                current_page: 1,
                imgBaseUrl: api.getImgBaseUrl()
            }
        },
        mounted(){
            this.getShareList();
            this.getAuditSwitchState();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            pageChange(current_page) {
                this.current_page = current_page;
                this.getShareList();
            },

            current(index) {
                $('.allAudit button').removeClass('current');
                $('.allAudit button:eq('+index+')').addClass('current');
                if(index === 0){
                    this.state = '';
                }else {
                    this.state = index - 1;
                }
                this.current_page = 1;
                this.getShareList();
            },

            getShareList() {
                let body = {
                    offset: this.current_page - 1,
                    limit: this.pageSize,
                };
                if (this.create_time_search) {
                    body.start_time = this.create_time_search[0];
                    body.end_time = this.create_time_search[1];
                }
                if(this.state !== '') {
                    body.type = this.state;
                }
                if(this.searchForm.uid) {
                    body.account = this.searchForm.uid;
                }
                this.loading.isLoading = true;
                api.shareInfo(body).then(res => {
                    if(res.data.code === 200) {
                        this.tableData = res.data.data.data;
                        this.total = res.data.data.count * 1;
                        this.loading.isLoading = false;
                        // this.tableData.images = this.tableData.images.split(',');
                        for (const i in this.tableData) {
                            // item.images = item.images.split(',')
                            this.tableData[i].images = this.tableData[i].images.split(',');
                        }
                        console.log('====>',this.tableData)
                    }else {
                        this.loading.isLoading = false;
                        this.$Notice.error({
							title: '错误',
							desc: res.data.msg
						});
                    }
                }).catch(err => {
                    this.loading.isLoading = false;
					this.$Notice.error({
						title: '错误',
						desc: '服务器错误,请联系管理员（' + err + '）',
					});
                })
            },

            returnDate(date) {
				if (date[0] == '') {
					this.create_time_search = '';
					return false;
				}
				
				this.create_time_search = date;
            },

            //获取审核开关状态
            getAuditSwitchState() {
                api.getAuditSwitch().then((res) => {
                    if(res.data.code === 200) {
                        if(res.data.data.share_open === 1) {
                            this.isOpen = false;
                        }else {
                            this.isOpen = true;
                        }
                    }
                })
            },

            //审核设置
            openChange() {
                this.openChangeLoading = true;
                let body = {
                    share_open: this.isOpen ? 0 : 1
                };
                api.auditSwitch(body).then((res) => {
                    if(res.data.code === 200) {
                        this.openChangeLoading = false;
                        this.$Notice.success({
                            title: '提示',
                            desc: '恭喜你，操作成功！'
                        });
                        this.getShareList();
                    }else {
                        this.$Notice.error({
							title: '错误',
							desc: res.data.msg
                        });
                        this.isOpen = !this.isOpen;
                        this.openChangeLoading = false;
                    }
                }).catch((err) => {
                    this.loading.isLoading = false;
					this.$Notice.error({
						title: '错误',
						desc: '服务器错误,请联系管理员（' + err + '）',
					});
                })
            },
            
            openImger(imgArr) {
                this.$store.state.imgArr = imgArr;
                this.$store.state.isImgerShow = true;
            },

            look(url,name) {
                this.$router.push({name:'VideoPlay',params:{url,name}})
            },

            pass(id) {
                this.$confirm('你确定通过该条共享信息吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let body = {
                        id: id,
                        type: 1
                    };
                    this.loading.isLoading = true;
                    api.shareInfoEdit(body).then(res => {
                        if(res.data.code === 200) {
                            this.getShareList();
                            this.$Message.success('操作成功');
                        }else {
                            this.loading.isLoading = false;
                            this.$Notice.error({
                                title: '错误',
                                desc: res.data.msg
                            });
                        }
                    }).catch(err => {
                        this.loading.isLoading = false;
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误,请联系管理员（' + err + '）',
                        });
                    });
                })
            },

            rejected(id) {
                let body = {
                        id: id,
                        type: 2
                    };
                    this.loading.isLoading = true;
                    api.shareInfoEdit(body).then(res => {
                        if(res.data.code === 200) {
                            this.getShareList();
                            this.$Message.success('操作成功');
                        }else {
                            this.loading.isLoading = false;
                            this.$Notice.error({
                                title: '错误',
                                desc: res.data.msg
                            });
                        }
                    }).catch(err => {
                        this.loading.isLoading = false;
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误,请联系管理员（' + err + '）',
                        });
                    });
            },

            del(id) {
                this.$confirm('此操作将永久删除该该条共享信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    this.loading.isLoading = true;
                    api.shareInfoDel(id).then(res => {
                        if(res.data.code === 200) {
                            this.getShareList();
                            this.$Message.success('删除成功');
                        }else {
                            this.loading.isLoading = false;
                            this.$Notice.error({
                                title: '错误',
                                desc: res.data.msg
                            });
                        }
                    }).catch(err => {
                        this.loading.isLoading = false;
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误,请联系管理员（' + err + '）',
                        });
                    });
                })
            }
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .share-list{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .allAudit{
                .current{
                    background-color: @greenColor !important;
                    border: 1px solid @greenColor;
                    color: #fff !important;
                }
            }
            .search-box{
                 margin-top: 20px;
                .search-btn{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background-color: @greenColor;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .btn-box{
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                line-height: 32px;
                .btn{
                    background-color: #fff;
                    border: 1px solid #ddd;
                    color: #333;
                }
                .ivu-btn[disabled] {
                    color: #c5c8ce !important;
                    background-color: #f7f7f7 !important;
                    border-color: #dcdee2 !important;
                }
            }
            .table-box{
                margin-top: 10px;
                width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
                .img-iview {
                    width: 60px;
                    max-height: 60px;
                    display: inline;
                    cursor: pointer;
                    
                }
            }
            .imger {
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.5);
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                text-align: right;
                background-color: #fff;
                padding: 0 20px;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>